<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="主页demo/js/jquery-3.6.0.min.js"></script>
		<script src="./js/layui/layui.js"></script>
		<link rel="stylesheet" href="./js/layui/css/layui.css" />
		<link rel="stylesheet"  href="css/base.css"/>
		<link rel="stylesheet" href="css/common.css" />
		<style>
			html,body{
				width: 100%;
			}
			.main{
				width: 100%;
				height: 100vh;
				background: linear-gradient(to right,#D0D0D0, #E2E2E2);				
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.nav{
				
				width: 800px;
				height: 50px;
				background-color: white;
				color: #007DDB;
				border-radius:25px;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 4px;
				position: relative;
			}
			.nav-item{
				height: 100%;
				width: 200px;
				text-align: center;
				line-height: 46px;
				border-radius: 25px;
				z-index: 1;
				
			}
			.nav-item:hover{
				cursor: pointer;
			}
			.nav-filter{
				position: absolute;
				background:  rgba(0,238,255,0.5);				
				transition: all 0.3s ease-in-out;
				width: 158px;
				height: 46px;			
				border-radius: 25px;
				
			}
			
			

		</style>
	</head>
	<body>
		<div class="main">
			
				<div class="nav">
					<div class="nav-filter"></div>
					<div class="nav-item">
						vue
					</div>
					<div class="nav-item">
						jq
					</div>
					<div class="nav-item">
						angular
					</div>
					<div class="nav-item">
						react
					</div>
					<div class="nav-item">
						flutter
					</div>
					
				</div>
			
			
			
			
			
			
			
		</div>
	
	
	
	<script>
		$(function(){
			$(".nav-item").click(function(e){	
				let navTop=$(".nav").offset().top;
				let navleft=$(".nav").offset().left;
				let navitemTop=$(this).offset().top;
				let navitemleft=$(this).offset().left;
				let navitemWidth=$(this).width();
				let navitemHeight=$(this).height();
				console.log(navitemleft)
				console.log(navleft)
				$(".nav-filter").css({
					"width":navitemWidth,
					"height":navitemHeight,
					"left":navitemleft-navleft+"px",
				
				})
			
			})
			
		
		})
	</script>
	</body>
</html>
